<template>
    <div class="listDiv pd10">
        <div class="searchDiv">
            <el-form class="searchLeft" ref="serform" :model="obj.req" label-position="top">
                <el-form-item class="serlabelB mr20" label="产品名称：" prop="title">
                    <el-input v-model="obj.req.title" placeholder="请输入产品名称" class="search_key" clearable />
                </el-form-item>
                <el-form-item class="serlabelB mr20" label="货号：" prop="itemnumber">
                    <el-input v-model="obj.req.itemnumber" placeholder="请输入货号" class="search_key" clearable />
                </el-form-item>
                <el-form-item class="serlabelB mr20" label="厂家名称：" prop="manufactor">
                    <el-input v-model="obj.req.manufactor" placeholder="请输入厂家名称" class="search_key" clearable />
                </el-form-item>
                <el-form-item class="serlabelB mr20" label="品牌名称：" prop="brand">
                    <el-input v-model="obj.req.brand" placeholder="请输入品牌名称" class="search_key" clearable />
                </el-form-item>
                <el-form-item class="serlabelB mr20" label="产品用途：" prop="usage">
                    <el-select v-model="obj.req.usage" placeholder="请选择产品用途" style="width: 100px;" clearable>
                        <el-option v-for="(item,index) in obj.config.产品用途||[]" :key="index" :label="item.name" :value="item.name" />
                    </el-select>
                </el-form-item>
                <el-form-item class="serlabelB mr20" label="审核状态：" prop="verify">
                    <el-select v-model="obj.req.verify" placeholder="请选择审核状态" style="width: 100px;" clearable>
                        <el-option v-for="(item,index) in proxy.$setting.globalData.verifyTypeAry" :key="index" :label="item.text" :value="item.id" />
                    </el-select>
                </el-form-item>
                <el-form-item class="serlabelB mr20" label="上下架状态：" prop="shelves">
                    <el-select v-model="obj.req.shelves" placeholder="请选择上下架状态" style="width: 100px;" clearable>
                        <el-option v-for="(item,index) in proxy.$setting.globalData.shelvesTypeAry" :key="index" :label="item.text" :value="item.id" />
                    </el-select>
                </el-form-item>
                <el-form-item class="mr20">
                    <el-button type="primary" @click="obj.req.currentpage=1;init()">查询</el-button>
                    <el-button plain @click="proxy.$refs['serform'].resetFields();init()">重置</el-button>
                </el-form-item>
            </el-form>
            <el-button type="primary" @click="add">添加产品</el-button>
        </div>

        <el-table :data="obj.ary" style="width: 100%;flex: 1;"
            :header-cell-style="{ background: '#E5E6EB', color: '#333333' }">
            <el-table-column prop="index" label="序号" width="60">
                <template #default="scope">
                    {{ scope.$index + 1 }}
                </template>
            </el-table-column>
            <el-table-column prop="title" label="产品名称"></el-table-column>
            <el-table-column prop="itemnumber" label="货号" width="140"></el-table-column>
            <!-- <el-table-column prop="min_price" label="目数" width="100"></el-table-column>
            <el-table-column prop="min_price" label="材质" width="100"></el-table-column> -->
            <el-table-column prop="min_price" label="最小单价" width="100"></el-table-column>
            <el-table-column prop="min_price" label="最小单价" width="100"></el-table-column>
            <el-table-column prop="manufactor" label="厂家"></el-table-column>
            <el-table-column prop="contacts" label="联系人" width="100"></el-table-column>
            <el-table-column prop="mobile" label="联系电话" width="120"></el-table-column>
            <el-table-column prop="verifyText" label="审核状态" width="100">
                <template #default="scope">
                    <el-tag :type="scope.row.verifyType">{{ scope.row.verifyText }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="shelves" label="上下架状态" width="140">
                <template #default="scope">
                    <el-switch v-if="scope.row.verify==1"  v-model="scope.row.shelves" size="small" :validate-event="false" @change="setstate(scope.row)"
                        active-text="上架" inactive-text="下架"
                        :active-value="1" :inactive-value="0">
                    </el-switch>
                    <el-tag v-else :type="scope.row.shelvesType">{{ scope.row.shelvesText }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="" label="操作" width="200">
                <template #default="scope">
                    <el-button type="primary" size="small" @click="edit(scope.row)">编辑</el-button>
                    <el-button type="primary" size="small" plain @click="preview(scope.row)">预览</el-button>
                    <el-popconfirm title="确定要删除吗？" @confirm="del(scope.row)">
                        <template #reference>
                            <el-button type="danger" plain size="small">删除</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>

        <div class="flex-center mt10">
            <el-pagination
                background
                size="small"
                @size-change="init()"
                @current-change="init()"
                v-model:current-page="obj.req.currentpage"
                :page-sizes="[10, 20, 50, 100]"
                v-model:page-size="obj.req.pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="obj.req.count">
                </el-pagination>
        </div>

        <el-drawer v-model="obj.drawer.show" :title="obj.drawer.title" size="50%" direction="rtl" :close-on-click-modal="false" destroy-on-close>
            <ProductEdit v-model:id="obj.drawer.product_id" @init="init" @close="obj.drawer.show = false" />
        </el-drawer>

        <el-dialog v-model="obj.dialog.show" :title="obj.dialog.title" width="600px" :close-on-click-modal="false" destroy-on-close>
            <ProductPre :data="obj.dialog.data" @close="obj.dialog.show = false" />
        </el-dialog>
    </div>
</template>

<script setup>
    import { reactive,getCurrentInstance,onMounted } from 'vue'
    import ProductEdit from './productEdit.vue'
    import ProductPre from './productPre.vue'
    let { proxy } = getCurrentInstance()

    let obj = reactive({
        drawer: {
            show: false,
            title: "",
            product_id: 0
        },
        req:{
            "title": "",
            "itemnumber": "",
            "manufactor": "",
            "brand": "",
            "usage": "",
            "verify": "",
            "shelves": "",
            currentpage: 1,
            pagesize: 10,
            count: 0,
            
        },
        ary:[],
        config: {},
        dialog: {
            show: false,
            title: ''
        }
    })

    onMounted(async()=>{
        obj.config = await proxy.$setting.getConfig()
        init()
    })

    let init = () => {
        proxy.$ajax({
            url: '/manager/product/list',
            data: obj.req,
            bfLoading: true
        }).then(d => {
            if(d.success){
                obj.ary = d.msg.list
                obj.ary.map(e=>{
                    e.verifyText = proxy.$util.aryVal("verifyTypeAry", e.verify, 'text')
                    e.verifyType = proxy.$util.aryVal("verifyTypeAry", e.verify, 'colorType')
                    e.shelvesText = proxy.$util.aryVal("shelvesTypeAry", e.shelves, 'text')
                    e.shelvesType = proxy.$util.aryVal("shelvesTypeAry", e.shelves, 'colorType')
                })
                obj.req.count = d.msg.count
            }
        }).catch(() => { })
    }

    let add = () => {
        obj.drawer.show = true
        obj.drawer.title = "添加产品"
        obj.drawer.product_id = 0;
    }
    
    let edit = x => {
        obj.drawer.show = true
        obj.drawer.title = "修改产品"
        obj.drawer.product_id = parseInt(x.product_id);
    }

    let setstate = x => {
        proxy.$ajax({
            url: '/manager/product/shelves',
            data: { product_ids: x.product_id, shelves: x.shelves },
            bfLoading: true
        }).then(da => {
            if(da.success){
                proxy.elMessageMixin(`成功`, 'success')
            }else{
                proxy.elMessageMixin(d.err, 'error')
            }
            init()
        }).catch(() => {init()})
    }

    let del = x => {
        proxy.$ajax({
            url: '/manager/product/delete',
            data: { product_id: x.product_id },
            bfLoading: true
        }).then(d => {
            if(d.success){
                proxy.elMessageMixin("删除成功", 'success')
                init()
            }else{
                proxy.elMessageMixin(d.err, 'error')
            }
        }).catch(() => { })
    }

    const preview=(x)=>{
        proxy.$ajax({
            url: '/manager/product/get',
            data: { product_id: x.product_id },
            bfLoading: true
        }).then(d => {
            obj.dialog = {
                show: true,
                title: x.title,
                data: {
                    ...d.msg||{},
                    addressInfo: {
                        address: d.msg.address||'',
                        longitude: d.msg.location?(d.msg.location.split(',')[0]||''):'',
                        latitude: d.msg.location?(d.msg.location.split(',')[1]||''):'',
                    } 
                }
            }
        }).catch(e => {})
    }
</script>

<style scoped>
</style>